<template>
  <div class="dept-container">
    <el-card class="dept-tree__card">
      <el-input v-model="filterText" placeholder="请输入内容" class="menu-tree__input">
        <template #suffix>
          <el-icon class="el-input__icon">
            <Search/>
          </el-icon>
        </template>
      </el-input>
      <el-tree
          class="dept-tree"
          ref="treeRef"
          :data="titleData"
          :props="defaultProps"
          :filter-node-method="filterNode"
      >
        <template #default="{ node, data }">
          <el-tooltip
              class="box-item"
              effect="dark"
              :content="node.label+'('+data.title+')'"
              placement="right-start"
          >
            <span class="tree-node" style="width: 8vw">{{ node.label }}({{node.data.title}}）
          </span>
          </el-tooltip>

        </template>

      </el-tree>
    </el-card>
    <el-card class="dept-tables__card">
      <div class="search">
        <span>部门名称 </span>
        <el-input placeholder="请输入部门信息" v-model="departName"/>
        <el-button class="el-button__primary" type="primary" @click="handleDeptMenu()">
          <template #icon>
            <el-icon>
              <Search/>
            </el-icon>
          </template>
          查询
        </el-button>
        <el-button class="el-button__default" @click="reset()">
          <template #icon>
            <el-icon>
              <Refresh/>
            </el-icon>
          </template>
          重置
        </el-button>
      </div>
      <el-button class="el-button__primary" type="primary" @click="openAddDeptDialog('')">
        <template #icon>
          <svg-icon icon-class="add"/>
        </template>
        新增
      </el-button>
      <el-button class="el-button__plain" type="primary" @click="store.setDeptUpload(true)">
        <template #icon>
          <svg-icon icon-class="cloud-upload"/>
        </template>
        导入
      </el-button>
      <el-table
          row-key="label"
          border
          class="dept-table"
          :header-cell-class-name="'table-header'"
          :cell-class-name="'cell'"
          :data="deptListData"
          highlight-current-row
          fit
          v-loading="loading"
      >
        <el-table-column prop="label" label="组织名称"  width="300px"/>
        <el-table-column prop="orderNum" label="排序" width="100px">
        </el-table-column>
        <el-table-column prop="title" label="部门类型">
          <template #default="scope">
            <el-tag v-if="scope.row.title === '学校'"   effect="plain" type="danger" size="large">学校</el-tag>
            <el-tag v-else-if="scope.row.title === '年级'"   effect="plain"  type="primary" size="large">年级</el-tag>
            <el-tag v-else-if="scope.row.title === '班级'"   effect="plain" type="success" size="large">班级</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="200px" />
        <el-table-column prop="createUser" label="创建人" >
          <template #default="scope">
            <el-tag v-if="scope.row.menuType === 'M'" type="success" size="large">目录</el-tag>
            <el-tag v-else-if="scope.row.menuType === 'F'" type="primary" size="large">菜单</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="operator" label="操作"  width="250px" >
          <template #default="scope">
            <el-button link size="small" class="dept-table__operator"  @click="openAddDeptDialog(scope.row.id)" :disabled="scope.row.title==='班级'">
              <template #icon>
                <svg-icon icon-class="add"/>
              </template>
              新增
            </el-button>
            <el-button link size="small" class="dept-table__operator" @click="openUpdateDeptDialog(scope.row.id)" :disabled="scope.row.disable">
              <template #icon>
                <svg-icon icon-class="update"/>
              </template>
              修改
            </el-button>
            <el-button link size="small" class="dept-table__operator" @click="deleteDept(scope.row.id)"  :disabled="scope.row.disable">
              <template #icon>
                <svg-icon icon-class="delete"/>
              </template>
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <add-dept @refresh="refreshData()"/>
    <upload-dept @refresh="refreshData()"/>
  </div>
</template>
<script setup lang="ts">

import {Refresh, Search} from "@element-plus/icons-vue";
import {onMounted, ref, watch} from "vue";

const treeRef = ref<TreeInstance>()
import SvgIcon from "@/components/SvgIcon/index.vue";
import {ElMessage, ElMessageBox, type TreeInstance} from "element-plus";
import type {menuList} from "@/api/menu/types.ts";
import {getDeptTreeApi, removeDept} from "@/api/dept";
import AddDept from "@/components/dept/addDept.vue";
import {deptStore} from "@/stores/dept/deptStore.ts";
import UploadDept from "@/components/dept/uploadDept.vue";

const filterText = ref('')
onMounted(() => {
  getMenuData()
  initDeptData()
})
const loading=ref(true)

const departName = ref('')

const defaultProps = {
  children: 'children',
  label: `label`,
  title: 'title'
}
const store=deptStore()
watch(filterText, (val) => {
  treeRef.value!.filter(val)
})
const titleData = ref([] as any[])
const deptListData=ref([] as menuList[])


const openAddDeptDialog=(dept :string) => {
  store.setDeptInsertOpen(true)
  store.setParentDeptId(dept)
}
const getMenuData = async () => {
  const res = await getDeptTreeApi('')
  titleData.value=[]
  titleData.value.push(res.data)
}
const filterNode = (value: string, data) => {
  if (!value) return true
  return data.label?.includes(value)
}

const initDeptData=async ()=>{
  loading.value=true
  const res = await getDeptTreeApi(departName.value)
  deptListData.value = res.data.children
  loading.value=false
}
/**
 * 打开更新菜单弹窗
 * @param id
 */
const openUpdateDeptDialog=(id:string)=>{
  const realId=id.split("-")[0]?id.split("-")[0]:'0'
  store.setUpdateDeptId(realId)
  store.setDeptInsertOpen(true)
}


/**
 * 删除id
 * @param rowId
 */
const deleteDept=(rowId:string)=>{
  ElMessageBox.confirm(
      '此操作将永久删除该部门, 是否继续?',
      '提示', {
        app: undefined, components: undefined, config: undefined, directives: undefined, mixins: [], provides: undefined,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
  ).then(async () => {
    const id=rowId.split("-")[0]?rowId.split("-")[0]:'0'
    const res = await removeDept(id)
      ElMessage({
        type: 'success',
        message: '删除成功!',
      })
      await initDeptData()
  }).catch(() => {
  })
}

/**
 * 查询菜单信息
 */
const handleDeptMenu=async () => {
  await initDeptData()
}

/**
 * 重置表单
 */
const reset=()=>{
  departName.value=''
  initDeptData()
}


const refreshData=()=>{
  reset();
  getMenuData();
  store.setUpdateDeptId('0')
  store.setParentDeptId('-000000')
}



</script>
<style scoped>

.dept-container {
  width: 100%;
  height: 100%;
  background-color: rgb(245, 245, 245);
  padding: 0;
  display: flex;

  .dept-tree__card {
    width: 13vw;
    box-shadow: none;
    margin: 0 .5vw 0 0;
    display: flex;

    .dept-tree {
      margin-top: 1vh;
      width: 10vw;

      .tree-node {
        font-size: 1.5vh;
      }
    }

    .tree-node.is-focus {
      color: rgb(46, 92, 246);
    }

  }

  .dept-tables__card {
    flex: 1;
    box-shadow: none;

    .search {
      span {
        line-height: 32px;
      }
      margin-bottom: 20px;
      display: flex;
      font-size: 12px;

      .el-input {
        width: 160px;
        height: 32px;
        font-size: 12px;
        margin: 0 8px;
      }


    }
    .dept-table {
      margin-top: 10px;
      max-height: 70vh;
      overflow: auto;
    }
  }
}

:deep(.el-input__wrapper.is-focus,.el-select__wrapper.is-focus) {
  box-shadow: 0 0 0 1px rgb(46, 92, 246) !important;
}
:deep(.table-header){
  color: #000000;
  font-size: 1.5vh;
  text-align: center;
}
.el-table {
  --el-table-row-hover-bg-color:  rgb(245, 247, 250);
  --el-table-header-bg-color:rgb(245, 247, 250);
}
.el-tag--dark, .el-tag--dark.el-tag--primary{
  --el-tag-bg-color:rgb(46, 92, 246);
  color:#ffffff;
}
.el-tag.el-tag--primary{
  --el-tag-text-color:rgb(46, 92, 246);
}

:deep(.cell){
  text-align: center;
  margin: 5px 0;
}
.dept-table__operator{
  color:rgb(46, 92, 246);
  font-size: 14px;
}

.el-button.is-link{
  --el-button-text-color:rgb(46, 92, 246);
  --el-button-disabled-text-color:rgb(150, 173, 250);
  --el-button-active-text-color:rgb(46, 92, 246);
}
.el-button.is-link:not(.is-disabled):active, .el-button.is-link:not(.is-disabled):hover{
  color:rgb(46, 92, 246);
}
</style>